在某一場面試的考試中有一題考題是列舉出至少3種垂直置中的方式
因此我也認為是時候可以將這個知識點記錄下來了( ¯•ω•¯ )

第一種

父層使用 display:flex + align-items:center + justify-content: center ，將子層元素的主軸與交錯軸設置為 center 來完成置中。

<div class="outer">
  <div class="inner"></div>
<div>

.outer{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {
  width: 50px;
  height: 50px;
  background: blue;
}

第二種

display:flex + margin:auto
父層設定display:flex，子層設定margin:auto，當子層設定為margin:auto 時，Flexbox會將所有可用的空間分配給這些邊距，讓子元件置中在它的容器中。

<div class="outer">
  <div class="inner"></div>
<div>

.outer{
  width: 100%;
  height: 100vh;
  display: flex;
}

.inner {
  width: 50px;
  height: 50px;
  background: blue;
  margin: auto;
}

第三種

(單行文字垂直置中)
父層text-align:center + 子層line-height

• 父層容器設定text-align:center讓子層的元件水平置中
• line-height 屬性指設定行距的高度，它可以用來控制文字的垂直間距和對齊。
• 範例中的line-height設定為600px與父層高度一樣，所以子層的單行文字會垂直置中在600px的行高中。

<div class="outer">
  <div class="inner">
    <p>1</p>
  </div>
<div>

.outer{
  width:600px;
  height: 600px;
  text-align: center;
}

.inner {
  background: gray;
  line-height: 600px;
}

第四種

position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%)

• 父層設定position: relative來確保子層會相對於父層的位置來進行定位
• 子層設定position: absolute會讓它根據其最進的定位父層元素進行相對定位，這邊是.outer
• top:50%和left:50%將子元素移動到父層的上邊以及左邊的正中間
• 因為子元素是依照父元素的左上角來對齊，因此需要再另外設定transform: translate(-50%, -50%)將元素平移回到其中心的位置，從而使元素完全置中對齊。

<div class="outer">
  <div class="inner">
  </div>
<div>

.outer{
  width:600px;
  height: 600px;
  position: relative;
  background: pink;
}

.inner {
  width:200px;
  height: 200px;
  background: gray;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}